"use client"; // Error components must be Client Components

import Link from "next/link";
import { useEffect } from "react";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div>
      <div className="text-center text-lg font-bold mt-48">Unhandled Error | {error.message}</div>
      <div className="text-center text-sm mt-4">{error.digest}</div>
      <div className="text-center mt-4">
        You can{" "}
        <span
          className="cursor-pointer underline"
          onClick={() => /* Attempt to recover by trying to re-render the segment */ reset()}
        >
          click here to try again
        </span>{" "}
        or{" "}
        <Link className="underline" href="/">
          go home
        </Link>{" "}
        to see something else.
      </div>
    </div>
  );
}
